<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两种加载的实现</title>
		<style type="text/css">
			img{
				
				block: inline-block;
				width: 200px;
			}
		</style>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			// DOMContentLoaded: 仅DOM内容加载完成
			//	1. 包括:HTML, JS
			//  2. 发生在前
			//  3. 什么时候使用它？ 只要代码不依赖与HTML和JS以外的其他资源(CSS, 图片)就可以绑定事件
					// [Webkit] : document.addEventListener('DOMContentLoaded', fn)
					// [IE]		: document.attachEvent('onreadystatechange', fn)
					// jQuery	: 三种方式
							// 1. $(document).ready(fn)
							// 2. $().ready(fn)
							// 3. $(fn)
							
					$(function(){
						alert('DOMContentLoaded is triggered!');
					});
					// jQuery源码 L8974
					// load, window.onload: DOM内容以及资源全部加载完成
						// 1. 包括: HTML, JS, CSS, 图片...
						// 2. 发生在后
						// 3. 什么时候使用它？ 如果代码需要访问CSS中的信息或者图片信息, 我们必须等待全部加载完成!
							//  [Webkit] : window.addEvnetListener('load', fn)
							//  [IE]     : window.attachEvent('onload', fn)
							//  jQuery   : $(window).load(fn)
					$(window).load(function(){
						alert('window load is triggered!');
					});
		</script>
	</head>
	
	<body>
		<div>
			<img src="img/01.jpg" alt="">
			<img src="img/02.jpg" alt="">
			<img src="img/03.jpg" alt="">
			<img src="img/04.jpg" alt="">
			<img src="img/05.jpg" alt="">
		</div>
		
	</body>
</html>
